iT邦幫忙

2025 iThome 鐵人賽

DAY 2
0
自我挑戰組

打造一個糖尿病自我監測小工具:從0開始學前端系列 第 2

Day02 打造一個糖尿病自我監測小工具:從0開始學前端

  • 分享至 

  • xImage
  •  

昨天學習了HTML網頁架構基礎的標籤意思,今天來學習:表格(table) 。在糖尿病的網站中,我們可能會需要用到表格來呈現資料,所以來學習這個基礎。

表格 Table

<table>
整個表格的外框

<caption>
專門表格標題標籤

<thead>

  • 用來分表格區塊的表頭區塊,為一整列的欄位名稱
  • <tr>搭配<th>

<tbody>

  • 表格內容的部分,真正內容的部分
  • <tr>搭配<td>

<tr>
的意思

<td>
各標題的儲存格,字會自動粗體、置中

<td>
一格儲存格的內容

實作部分

今天目標有兩個:

  1. 在主頁加上糖尿病種類簡易表格
  2. 新開 report.html 紀錄頁面,紀錄病人狀況表格
  3. 新開 record.html 表單頁面,讓使用者可以輸入資料

簡易種類表格

  • 程式碼
    https://ithelp.ithome.com.tw/upload/images/20250824/201696985aIUdWGLht.png

https://ithelp.ithome.com.tw/upload/images/20250824/20169698fpakYSBH0p.png

  • 預覽畫面
    https://ithelp.ithome.com.tw/upload/images/20250824/20169698SuddkeutCf.png

report.html 紀錄頁面

  • 程式碼
    https://ithelp.ithome.com.tw/upload/images/20250824/20169698plL7qYhri6.png

  • 預覽畫面
    https://ithelp.ithome.com.tw/upload/images/20250824/20169698h1Q6SujXSx.png

結尾

目前只是簡易的紀錄資料,但感覺這種長久觀測數據的資料很適合用折線圖呈現,所以之後應該會試著寫寫看,另外圖片也比較一目瞭然。


上一篇
Day01 打造一個糖尿病自我監測小工具:從0開始學前端
下一篇
Day03 打造一個糖尿病自我監測小工具:從0開始學前端
系列文
打造一個糖尿病自我監測小工具:從0開始學前端4
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言